<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>

  <style>
	li {
		float: left;
		width: 100px;
		border: 1px solid red;
	}

	.clearfix::before, 
	.clearfix::after {
		display: block; /*转换为块状元素*/
		content: "";  /*内容*/
		clear:both;  /*清除浮动*/
		height: 0;   /*高度为0*/
		visibility: hidden; /*隐藏元素*/
	}


  </style>

	<!-- 
	隐藏元素2种方式：
	display:block;           直接隐藏整个盒子，当前位置也空出来了
	visibility: hidden;      隐藏文字，盒子的位置还是存在的
	
	-->

	<h3 style="visibility: hidden;"> 标题 </h3>

  
  <ul class="clearfix">
	<!-- 加一堵墙 -->
	<li> 元素1 </li>
	<li> 元素1 </li>
	<li> 元素1 </li>
	<li> 元素1 </li>

	<!-- 加一堵墙 -->
	<!-- <div class="clearfix"> </div> -->
  </ul>

  <ul>
	<li> 元素2 </li>
	<li> 元素2 </li>
	<li> 元素2 </li>
	<li> 元素2 </li>
  </ul>

 </body>
</html>
